<template>
	<!-- 历史合同 -->
	<div class="subcontractList padding-page ps-a workers">
		<div class="body_header">
			<el-tag class="list">项目: {{projectName}}</el-tag>
			<el-tag type="success" class="list">工人: {{workerName}}</el-tag>
			<el-tag type="info" class="list">已签订合同总数: {{contractTotal}}</el-tag>
		</div>

		<el-table :data="tableData" class="m-t-20" style="width: 100%" height="74%">
			<el-table-column prop="contractId" label="合同编号" width="300">
			</el-table-column>
			<el-table-column label="状态" width="100">
				<template slot-scope="scope">
					<span :style="{color: stateList[scope.row.contractStatus].color}">
						{{stateList[scope.row.contractStatus].label}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="detailsInfo.basicDailyWage" label="日基本工资" width="200">
			</el-table-column>
			<el-table-column label="绩效计量方式" width="200">
				<template slot-scope="scope">
					<span>
						{{jiXiaoState[scope.row.detailsInfo.performanceSettlementType]}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="detailsInfo.supplementaryMatters" label="备注" width="200">
			</el-table-column>
			<el-table-column width="180" prop="detailsTimeInfo.termValidityStart" label="生效日期">
			</el-table-column>
			<el-table-column prop="detailsTimeInfo.termValidityEnd" width="180" label="失效日期">
			</el-table-column>
			<el-table-column width="200" label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="showDetails(scope.row)">查看合同文本</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="m-t-20 ta-c tt-a">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!-- 合同预览 -->
		<cDetails v-if="detailsShow" :pdfUrl="pdfUrl">
			<template>
				<div>
					<span>
						工人: {{detailsForm.originatorName}}
					</span>
					<span>
						合同编号: {{detailsForm.contractId}}
					</span>
				</div>
				<div>
					<el-button @click="cal">返回</el-button>
				</div>
			</template>
		</cDetails>
	</div>
</template>
<script>
	import cDetails from "../../../components/details";
	import {
		QuerySigningPartyContractList,
		QueryContractFileDetails
	} from '@/api/contract/workers'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			cDetails
		},
		computed: {
			...mapGetters([
				'userId',
				'currId',
				'roleId'
			])
		},
		data() {
			return {
				tableData: [],
				stateList: [{
						label: '双方待签订',
						color: '#E6A23C'
					},
					{
						label: '甲方待签订',
						color: '#E6A23C'
					},
					{
						label: '乙方待签订',
						color: '#E6A23C'
					},
					{
						label: '合同生效',
						color: '#409EFF'
					},
					{
						label: '已取消',
						color: '#909399'
					},
					{
						label: '已驳回',
						color: '#909399'
					},
					{
						label: '已过期',
						color: '#909399'
					},
				],
				currentPage: 1, // 当前页
				pageSize: 10, //每页多少条
				total: 0, // 总数量
				detailsShow: false,
				detailsForm: {},
				pdfUrl: '',
				jiXiaoState: ['无绩效', '按量计算', '按天结算']
			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			// 查看详情
			showDetails(row) {
				console.log('查看详情', row);
				this.detailsForm = {
					originatorName: this.$route.query.workerName,
					contractId: row.contractId,
				}
				// this.detailsForm = row;
				//this.detailsShow = true;
				//this.pdfUrl = row.contractUrl
				const data = {
					contractId: row.contractId
				}
				console.log(data);
				QueryContractFileDetails(data).then(res => {
					console.log(res)
					if (res.code == '0') {
						if (res.data.result[0].detailsUrlInfo.contractUrl != null) {
							this.detailsShow = true;
							this.pdfUrl = res.data.result[0].detailsUrlInfo.contractUrl;
						} else {
							this.$message.info('contractUrl为空');
						}

					}
				})
			},
			// 关闭
			cal() {
				this.detailsShow = false;
			},
			init() {
				const {
					projectId,
					projectName,
					partyBId,
					subcontractId
				} = this.$route.query
				const data = {
					userId: this.userId,
					roleId: this.roleId,
					currId: this.currId,
					pageFlag: 1, //是否启用分页
					currentPage: this.currentPage, //当前页
					queryNumber: this.pageSize,
					projectId: projectId,
					subContractorId: subcontractId,
					partyBId: partyBId,
					contractStatus: 3
				}
				console.log(data)
				QuerySigningPartyContractList(data).then(res => {
					console.log(res, '合同列表')
					if (res.code == '0') {
						this.tableData = res.data.result
						this.total = res.data.resultTotal
					}
				})
			},
		},
		created() {
			this.contractTotal = this.$route.query.contractTotal
			this.workerName = this.$route.query.workerName
			this.projectId = this.$route.query.projectId
			this.projectName = this.$route.query.projectName
			this.init()
		}
	}
</script>
<style lang="scss">
	.subcontractList {
		background: #fff;
		z-index: 12;
	}

	.body_header {
		display: flex;
		padding-bottom: 10px;
		border-bottom: 1px solid #d8dce5;

		.list {
			min-width: 200px;
			height: 50px;
			line-height: 50px;
			margin-right: 50px;
			font-size: 18px;
		}
	}

	.pagination {
		width: 100%;
	}
</style>
